<div class="uk-grid">
    <div class="uk-width-3-4@l">
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-card-header">修改头像</div>
            <div class="uk-card-body  uk-text-center">
                <div class="dux-avatar-preview uk-clearfix uk-padding" id="preview">
                    <img src="{$userInfo.avatar}" class="uk-border-circle preview-lg" width="200" height="200">
                </div>

                <div class="avatar-btn uk-padding">
                    <form class="dux-form uk-text-center" action="{url()}" method="post" data-dux="form-bind" data-advanced="false">
                        <div class="js-upload uk-form-custom" >
                            <input type="file" accept="image/*" name="avatar" id="avatar" style="font-size: 1.4rem;">
                            <button class="uk-button uk-button-default" type="button" tabindex="-1">选择头像</button>
                        </div>
                        <button type="submit" class="uk-button uk-button-primary " >
                            保存头像
                        </button>
                    </form>

                </div>
            </div>
        </div>
    </div>
    <div class="uk-width-1-4@l">
        <!--include{app/topics/view/theme/common/user_setting}-->
    </div>

</div>



<script>
    Do('base', function () {
        // 选择图片
        var URL = window.URL || window.webkitURL;
        var blobURL;

        $('#avatar').change(function () {
            var files = this.files;
            var file;
            if (files && files.length) {
                file = files[0];
                blobURL = URL.createObjectURL(file);
                $('#preview').find('img').attr('src', blobURL);
            }
        });

    });
</script>